<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
      .div-card {
        border: 1px gray solid;
        border-radius: 10px;
        padding: 15px;
      }
      
      .div-card-title {
        font-size: 15px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      
      .div-card-body {
        display: flex;
        column-gap: 20px;
      }
      
      .div-card-son {
        width: 200px;
        height: 300px;
        overflow-y: auto;
      }
      
      .div-card-son__son {
        color: white;
        font-size: 15px;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
      }
      
      .scroll-snap-type {
        height: 300px;
        scroll-snap-align: start;
      }
      
      .scroll-snap-align {
        height: 200px;
      }
      
      .scroll-padding {
        height: 300px;
        scroll-snap-align: start;
      }
      
      .scroll-margin {
        height: 300px;
        scroll-snap-align: start;
      }
    </style>
  </head>
  <body>
    <!--scroll-snap-type属性设置滚动容器的吸附方向与吸附严格程度，吸附方向属性值可为x、y、both、block或inline，吸附严格程度属性值可为必须被吸附mandatory或可以被吸附proximity，proximity是否被吸附由浏览器决定-->
    <div class="div-card">
      <div class="div-card-title">
        scroll-snap-type属性设置滚动容器的吸附方向与吸附严格程度，吸附方向属性值可为x、y、both、block或inline，吸附严格程度属性值可为必须被吸附mandatory或可以被吸附proximity
      </div>
      <div class="div-card-body">
        <div class="div-card-son" style="scroll-snap-type: y mandatory">
          <div class="div-card-son__son scroll-snap-type" style="background: pink">y mandatory</div>
          <div class="div-card-son__son scroll-snap-type" style="background: skyblue">y mandatory</div>
          <div class="div-card-son__son scroll-snap-type" style="background: plum">y mandatory</div>
        </div>
        
        <div class="div-card-son" style="scroll-snap-type: y proximity">
          <div class="div-card-son__son scroll-snap-type" style="background: pink">y proximity</div>
          <div class="div-card-son__son scroll-snap-type" style="background: skyblue">y proximity</div>
          <div class="div-card-son__son scroll-snap-type" style="background: plum">y proximity</div>
        </div>
      </div>
    </div>
    <br>
    
    <!--scroll-snap-align属性设置滚动容器内子元素的吸附位置，其属性值可为开始位置start、结束位置end、中间位置center或不吸附none。若滚动容器scroll-snap-type属性值为mandatory但子元素未设置scroll-snap-align属性或scroll-snap-align属性值为none则该子元素永远无法滚入-->
    <div class="div-card">
      <div class="div-card-title">
        scroll-snap-align属性设置滚动容器内子元素的吸附位置，其属性值可为开始位置start、结束位置end、中间位置center或不吸附none
      </div>
      <div class="div-card-body">
        <div class="div-card-son" style="scroll-snap-type: y mandatory">
          <div class="div-card-son__son scroll-snap-align" style="background: pink">start</div>
          <div class="div-card-son__son scroll-snap-align" style="background: skyblue;scroll-snap-align: start">start
          </div>
          <div class="div-card-son__son scroll-snap-align" style="background: plum">start</div>
        </div>
        
        <div class="div-card-son" style="scroll-snap-type: y mandatory">
          <div class="div-card-son__son scroll-snap-align" style="background: pink">center</div>
          <div class="div-card-son__son scroll-snap-align" style="background: skyblue;scroll-snap-align: center">center
          </div>
          <div class="div-card-son__son scroll-snap-align" style="background: plum">center</div>
        </div>
        
        <div class="div-card-son" style="scroll-snap-type: y mandatory">
          <div class="div-card-son__son scroll-snap-align" style="background: pink">end</div>
          <div class="div-card-son__son scroll-snap-align" style="background: skyblue;scroll-snap-align: end">end
          </div>
          <div class="div-card-son__son scroll-snap-align" style="background: plum">end</div>
        </div>
      </div>
    </div>
    <br>
    
    <!--scroll-snap-stop属性设置滚动容器内子元素是否可跳跃吸附，其属性值可为可跳跃吸附normal或不可跳跃吸附always（无效？？？）-->
    
    <!--scroll-padding属性设置滚动容器的吸附偏移-->
    <div class="div-card">
      <div class="div-card-title">
        scroll-padding属性设置滚动容器的吸附偏移
      </div>
      <div class="div-card-body">
        <div class="div-card-son" style="scroll-snap-type: y mandatory;scroll-padding: 0px">
          <div class="div-card-son__son scroll-padding" style="background: pink">0px</div>
          <div class="div-card-son__son scroll-padding" style="background: skyblue">0px</div>
          <div class="div-card-son__son scroll-padding" style="background: plum">0px</div>
        </div>
        
        <div class="div-card-son" style="scroll-snap-type: y mandatory;scroll-padding: 30px">
          <div class="div-card-son__son scroll-padding" style="background: pink">30px</div>
          <div class="div-card-son__son scroll-padding" style="background: skyblue">30px</div>
          <div class="div-card-son__son scroll-padding" style="background: plum">30px</div>
        </div>
      </div>
    </div>
    <br>
    
    <!--scroll-margin属性设置滚动容器内子元素的吸附外边距-->
    <div class="div-card">
      <div class="div-card-title">
        scroll-margin属性设置滚动容器内子元素的吸附外边距
      </div>
      <div class="div-card-body">
        <div class="div-card-son" style="scroll-snap-type: y mandatory">
          <div class="div-card-son__son scroll-margin" style="background: pink;scroll-margin:0px">0px</div>
          <div class="div-card-son__son scroll-margin" style="background: skyblue;scroll-margin:0px">0px</div>
          <div class="div-card-son__son scroll-margin" style="background: plum;scroll-margin:0px">0px</div>
        </div>
        
        <div class="div-card-son" style="scroll-snap-type: y mandatory">
          <div class="div-card-son__son scroll-margin" style="background: pink;scroll-margin:40px">40px</div>
          <div class="div-card-son__son scroll-margin" style="background: skyblue;scroll-margin:40px">40px</div>
          <div class="div-card-son__son scroll-margin" style="background: plum;scroll-margin:40px">40px</div>
        </div>
      </div>
    </div>
  </body>
</html>